
@for $i from 0 through 100 {
    .mg-#{$i} {
        margin: #{$i}px;
    }
    .mgt-#{$i} {
        margin-top: #{$i}px;
    }
    .mgr-#{$i} {
        margin-right: #{$i}px;
    }
    .mgb-#{$i} {
        margin-bottom: #{$i}px;
    }
    .mgl-#{$i} {
        margin-left: #{$i}px;
    }
    .pd-#{$i} {
        padding: #{$i}px;
    }
    .pdt-#{$i} {
        padding-top: #{$i}px;
    }
    .pdr-#{$i} {
        padding-right: #{$i}px;
    }
    .pdb-#{$i} {
        padding-bottom: #{$i}px;
    }
    .pdl-#{$i} {
        padding-left: #{$i}px;
    }
    .f#{$i} {
        font-size: #{$i}px;
    }
    .lh#{$i} {
        line-height: #{$i}px;
    }
    .w#{$i} {
        width: #{$i}px;
    }
    .h#{$i} {
        height: #{$i}px;
    }
    .w-calc#{$i} {
        width: calc(100% - #{$i}px);
    }
    .h-calc#{$i} {
        height: calc(100% - #{$i}px);
    }
    .left#{$i} {
        left: #{$i}px;
    }
    .top#{$i} {
        top: #{$i}px;
    }
    .right#{$i} {
        right: #{$i}px;
    }
    .bottom#{$i} {
        bottom: #{$i}px;
    }
}